<template>
  <div>
    <!-- 信息卡 -->
    <div class="infoCard">
      <div class="textSpan">
        <span> 姓名:李建刚 </span>
        <span> 入住号:2323928392 </span>
        <span> 身份证号:640102182312111234 </span>
        <span>责任护理员:李大好</span>
        <span>责任护士:李强</span>
        <span> 养老账户余额:723723元 </span>
        <span> 医疗保障金:32772元 </span>
      </div>

      <!-- 日期选择 -->
      <div>
        <div class="demo-date-picker">
          <div class="block">
            <el-date-picker
              v-model="value2"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="shortcuts"
              size="large"
            />
            <el-button
              type="primary"
              @click="onSubmit"
              color="rgba(86, 118, 247, 1)"
              style="width: 87px; height: 38px; margin-left: 17px"
              >搜索</el-button
            >
          </div>
        </div>
      </div>
    </div>

    <!-- 表单 -->
    <div>
      <table class="table1">
        <tr>
          <td
            colspan="5"
            style="
              text-align: center;
              font-size: 20px;
              height: 74px;
              background-color: #f3f6f9;
            "
          >
            老年医养照护中心
          </td>
        </tr>

        <tr>
          <td
            colspan="5"
            style="
              text-align: center;
              font-size: 14px;
              height: 50px;
              background-color: #f3f6f9;
            "
          >
            医疗消费明细
          </td>
        </tr>

        <tr>
          <td>入住号:23232323</td>
          <td>姓名:李建刚</td>
          <td>性别:女</td>
          <td>照护等级:四级照护</td>
          <td>床位:21床</td>
        </tr>

        <tr>
          <td colspan="2">家属性名:李建铁</td>
          <td colspan="2">家属性别:女</td>
          <td>联系电话:13000000000</td>
        </tr>

        <tr>
          <td colspan="5">消费日期:2022-12-01至2023-02-12</td>
        </tr>

        <tr>
          <td colspan="3" style="color: red; text-align: start">
            医疗保障金总支出:23232,4元,其中特殊护理支出:232元
          </td>
          <td colspan="2" style="color: red; text-align: start">
            医保总支出:12元,其中特殊护理支出:12元
          </td>
        </tr>

        <tr>
          <td colspan="4" style="text-align: start">医疗支出总金额</td>
          <td style="color: red; text-align: start">232元</td>
        </tr>

        <tr>
          <td colspan="5" style="font-weight: bold">
            <div
              style="
                display: flex;
                justify-content: space-between;
                padding-left: 20px;
                padding-right: 40px;
              "
            >
              <div style="font-weight: bold">医疗保障金支出</div>
              <div style="font-weight: bold">222元</div>
            </div>
          </td>
        </tr>
      </table>

      <table class="table2">
        <tr style="background-color: #f3f6f9">
          <td class="time">时间</td>
          <td class="pro">项目</td>
          <td class="price">金额</td>
          <td class="info">备注</td>
          <td class="action">操作</td>
        </tr>

        <tr>
          <td class="time">2022-12-12 12:12:12</td>
          <td class="pro">
            <div
              style="display: flex; width: 100%; justify-content: space-evenly"
            >
              <div class="tag">门诊</div>
              <div style="line-height: 35px">细谈护理,数量:1,单位:次,￥6</div>
            </div>
          </td>
          <td class="price">6</td>
          <td class="info"></td>
          <td class="action">
            <el-button type="primary" link @click="dialogVisible = true">冲销</el-button>
          </td>
        </tr>

        <tr>
          <td class="time">2022-12-12 12:12:12</td>
          <td class="pro">
            <div
              style="display: flex; width: 100%; justify-content: space-evenly"
            >
              <div class="blank"></div>
              <div style="line-height: 35px">细谈护理,数量:1,单位:次,￥6</div>
            </div>
          </td>
          <td class="price">6</td>
          <td class="info"></td>
          <td class="action">
            <el-button type="primary" link @click="dialogVisible = true">冲销</el-button>
          </td>
        </tr>

        <tr>
          <td class="time">2022-12-12 12:12:12</td>
          <td class="pro">
            <div
              style="display: flex; width: 100%; justify-content: space-evenly"
            >
              <div class="tag">门诊</div>
              <div style="line-height: 35px">细谈护理,数量:1,单位:次,￥6</div>
            </div>
          </td>
          <td class="price">6</td>
          <td class="info"></td>
          <td class="action">
            <el-button type="primary" link @click="dialogVisible = true">冲销</el-button>
          </td>
        </tr>

        <tr>
          <td colspan="5" style="font-weight: bold">
            <div
              style="
                display: flex;
                justify-content: space-between;
                padding-left: 20px;
                padding-right: 40px;
              "
            >
              <div style="font-weight: bold">医保支出</div>
              <div style="font-weight: bold">222元</div>
            </div>
          </td>
        </tr>
      </table>

      <table class="table3">
        <tr style="background-color: #f3f6f9">
          <td class="time">时间</td>
          <td class="pro1">项目</td>
          <td class="price1">金额</td>
        </tr>

        <tr>
          <td class="time">2022-12-12 12:12:12</td>
          <td class="pro1">
            <div
              style="display: flex; width: 100%; justify-content: space-evenly"
            >
              <div class="tag">门诊</div>
              <div style="line-height: 35px">细谈护理,数量:1,单位:次,￥6</div>
            </div>
          </td>
          <td class="price1">6</td>
        </tr>

        <tr>
          <td class="time">2022-12-12 12:12:12</td>
          <td class="pro1">
            <div
              style="display: flex; width: 100%; justify-content: space-evenly"
            >
              <div class="tag">门诊</div>
              <div style="line-height: 35px">细谈护理,数量:1,单位:次,￥6</div>
            </div>
          </td>
          <td class="price1">6</td>
        </tr>

        <tr>
          <td class="time">2022-12-12 12:12:12</td>
          <td class="pro1">
            <div
              style="display: flex; width: 100%; justify-content: space-evenly"
            >
              <div class="tag">门诊</div>
              <div style="line-height: 35px">细谈护理,数量:1,单位:次,￥6</div>
            </div>
          </td>
          <td class="price1">6</td>
        </tr>
      </table>
    </div>

    <!-- 弹出框 -->
    <el-dialog v-model="dialogVisible" title="Tips" width="500" draggable>
      <span>It's a draggable Dialog</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  <script lang="ts" setup>
import { ref } from "vue";

const dialogVisible = ref(false);

const onSubmit = () => {
  console.log("submit!");
};

const value2 = ref("");

const shortcuts = [
  {
    text: "一周内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "一个月内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "三个月内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
</script>
  <style>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  margin-left: 40px;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: start;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.infoCard {
  width: 100%;
  min-height: 100px;
  background-color: #f3f6f9;
  padding: 10px;
}

.infoCard .textSpan span {
  margin-left: 40px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.table1 {
  margin-top: 50px;
  min-height: 500px;
}

.table2 {
  /* width: 100%; */
  height: 230px;
}

.time {
  width: 20%;
}

.pro {
  width: 40%;
}

.price {
  width: 10%;
}

.info {
  width: 15%;
}

.action {
  width: 15%;
}

.table1 tr,
td {
  /* width: 80%; */
  border-spacing: 0;
  border: 1px solid #e3e3e3;
  text-align: center;
  height: 50px;
  width: 20%;
  font-size: 14px;
}

.table2 {
  border-spacing: 0;
  border: 1px solid #e3e3e3;
  text-align: center;
}

.table3 .time {
  width: 20%;
}

.table3 .pro1 {
  width: 65%;
}

.table3 .price1 {
  width: 15%;
}

.tag {
  width: 45px;
  height: 35px;
  border: 1px solid red;
  color: red;
  font-size: 14px;
  margin-right: 20px;
  line-height: 35px;
}

.blank {
  width: 45px;
  height: 35px;
  /* border: 1px solid red; */
  /* color: red; */
  font-size: 14px;
  margin-right: 20px;
}

.info {
  min-width: 150px;
}
</style>